
namespace("playground.creatures.Turtle", 
{
	'@inherits' 		 : w3c.HtmlComponent,
	'@stylesheets' :  ["/TurtleCanvas/cdn/css/Turtle.css"],

	
	initialize : function() {
		this.thumbnail = this.querySelector(".Turtle img");
		application.addEventListener("click", this.moveto.bind(this));	
		this.addEventListener("mouseover", this.mouseover.bind(this));	
		this.addEventListener("mouseout", this.mouseout.bind(this));	
		this.addEventListener("dragselected", this.ondragselected.bind(this), false)
		this.addEventListener("deselected", this.ondeselected.bind(this), false)
	},
	
	ondragselected : function(e){
		this.addClass("selected")
	},
	
	ondeselected : function(){
		this.removeClass("selected");
	},
	
	mouseover : function(){
		if(this.ismoving){return;}
		this.thumbnail.src = "/TurtleCanvas/cdn/images/Turtle.idle.gif";
		this.addClass("hover");
	},
	
	mouseout : function(){
		if(this.ismoving){return;}
		this.thumbnail.src = "/TurtleCanvas/cdn/images/Turtle.stopped.gif";
		this.removeClass("hover");
	},
	
	moveto : function(e) {
		if(this.ismoving){return;}
		var self=this;
		this.thumbnail.src = "/TurtleCanvas/cdn/images/Turtle.walking.gif";
		this.ismoving=true;
		this.animate({ "left": e.clientX }, 
		{
			duration: 6000, //slow turtle
			callback: this.stopped.bind(this)
		})
	},
	
	stopped : function(){
		this.thumbnail.src = "/TurtleCanvas/cdn/images/Turtle.stopped.gif";
		this.ismoving=false;
	},
	
	innerHTML:
	'<div class="Turtle" draggable="false">\
		<img draggable="false" id="thumbnail" src="/TurtleCanvas/cdn/images/Turtle.stopped.gif"/>\
		<div class="bubble"></div>\
	</div>'
});
